﻿@page "/Detail"

@using BlazorTable

<h1>DetailTemplate</h1>

<p>The <code>DetailTemplate</code> can be used to display additional details below an item.</p>
<br />
<div class="btn-toolbar mb-3">
    <div class="btn-group mr-2">
        <button class="btn btn-primary" @onclick="_ => Try(() => table.ToggleAllDetailsView(open: true))">Open All</button>
        <button class="btn btn-danger" @onclick="_ => Try(() => table.ToggleAllDetailsView(open: false))">Close All</button>
    </div>
    <div class="input-group mr-1">
        <div class="input-group-prepend">
            <div class="input-group-text">Row Number:</div>
        </div>
        <input type="number" @bind="rowNumber" class="form-control">
    </div>
    <div class="btn-group">
        <button class="btn btn-primary" @onclick="_ => Try(() => table.ToggleDetailView(rowNumber, open: true))">Open</button>
        <button class="btn btn-danger" @onclick="_ => Try(() => table.ToggleDetailView(rowNumber, open: false))">Close</button>
    </div>
</div>
<br />
@if (errorMessage != "")
{
    <label>@errorMessage</label>
}
<Table @ref="table" TableItem="PersonData" Items="data" PageSize="15" ColumnReorder="true">
    <Column TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Filterable="true" Width="10%" DefaultSortColumn="true" />
    <Column TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Filterable="true" Width="20%" />
    <Column TableItem="PersonData" Title="Email" Field="@(x => x.email)" Sortable="true" Filterable="true" Width="20%">
        <Template>
            <a href="mailto:@context.email">@context.email</a>
        </Template>
    </Column>
    <Column TableItem="PersonData" Title="Paid" Field="@(x => x.paid)" Sortable="true" Filterable="true" Width="10%">
        <Template>
            @context.paid.ToString()
        </Template>
    </Column>
    <Column TableItem="PersonData" Title="Price" Field="@(x => x.price)" Sortable="true" Filterable="true" Width="10%" Format="C" Align="Align.Right" />
    <Column TableItem="PersonData" Title="Created Date" Field="@(x => x.created_date)" Sortable="true" Filterable="true" Width="10%">
        <Template>
            @(context.created_date.HasValue ? context.created_date.Value.ToShortDateString() : string.Empty)
        </Template>
    </Column>
    <Column TableItem="PersonData" Title="Enum" Field="@(x => x.cc_type)" Sortable="true" Filterable="true" Width="10%">
        <Template>
            @context.cc_type
        </Template>
    </Column>
    <DetailTemplate TableItem="PersonData">
        <strong>Name</strong> @context.full_name
        <br />
        <strong>Email</strong> @context.email
        <br />
        <strong>Created Date</strong>@context.created_date
        <br />
    </DetailTemplate>
    <Pager ShowPageNumber="true" ShowTotalCount="true" />
</Table>

@code
{
    [Inject]
    private HttpClient Http { get; set; }

    private ITable<PersonData> table;

    private PersonData[] data;

    private int rowNumber;

    private string errorMessage = "";

    protected override async Task OnInitializedAsync()
    {
        data = await Http.GetFromJsonAsync<PersonData[]>("sample-data/MOCK_DATA.json");
    }

    public class PersonData
    {
        public int? id { get; set; }
        public string full_name { get; set; }
        public string email { get; set; }
        public bool? paid { get; set; }
        public decimal? price { get; set; }
        public CreditCard? cc_type { get; set; }
        public DateTime? created_date { get; set; }
    }

    public enum CreditCard
    {
        none = 0,
        [Description("MasterCard")]
        MasterCard = 1,
        Visa = 2
    }

    private void Try(Action action)
    {
        try
        {
            errorMessage = "";
            action();
        }
        catch (Exception e)
        {
            errorMessage = e.Message;
        }
    }
}
